<template>
	<view class="page-container">
		<uni-nav-bar dark :fixed="true" status-bar left-icon="left" :border="false" title="个人简历" @clickLeft="back" />
		<view class="content">
			<view class="skill">
				<view class="title">
					<text>个人技能</text>
					<image class="icon" @click="isShow(1)" src='../../../static/my/icon_edit.png'></image>
				</view>
				<view class="value" v-if='show1'>
					{{textarea1 ? textarea1 : '暂无'}} 
				</view>
				<view v-else class="uni-textarea">
					<textarea class="con" v-model="textarea1" :maxlength="200"  placeholder="个人技能"/>
				</view>
			</view>
			<view class="skill">
				<view class="title">
					<text>求职期望</text>
					<image class="icon" @click="isShow(2)" src='../../../static/my/icon_edit.png'></image>
				</view>
				<view class="value" v-if='show2'>
					{{textarea2 ? textarea2 : '暂无'}} 
				</view>
				<view v-else class="uni-textarea">
					<textarea class="con" v-model="textarea2" placeholder="求职期望" auto-height/>
				</view>
			</view>
			<view class="skill">
				<view class="title">
					<text>工作经历</text>
					<image class="icon" @click="isShow(3)" src='../../../static/my/icon_edit.png'></image>
				</view>
				<view class="value" v-if='show3'>
					{{textarea3 ? textarea3 : '暂无'}} 
				</view>
				<view v-else class="uni-textarea">
					<textarea class="con" v-model="textarea3" placeholder="工作经历"/>
				</view>
			</view>
			<view class="skill">
				<view class="title">
					<text>教育经历</text>
					<image class="icon" @click="isShow(4)" src='../../../static/my/icon_edit.png'></image>
				</view>
				<view class="value" v-if='show4'>
					{{textarea4 ? textarea4 : '暂无'}} 
				</view>
				<view v-else class="uni-textarea">
					<textarea class="con" v-model="textarea4" placeholder="教育经历" auto-height/>
				</view>
			</view>
		</view>
		<view class="footer">
			<button class="connect" @click="save" >
			  保存
			</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				show1: true,
				show2: true,
				show3: true,
				show4: true,
				textarea1: '',
				textarea2: '',
				textarea3: '',
				textarea4: '',
			}
		},
		mounted() {
			this.getResumeDetail();
		},
		methods: {
			back() {
				uni.navigateBack()
			},
			bindTextAreaBlur: function (e) {
				console.log(e.detail.value)
			},
			isShow(type) {
				if(type === 1) {
					this.show1 =! this.show1;
				} else if(type === 2) {
					this.show2 =! this.show2;
				} else if(type === 3) {
					this.show3 =! this.show3;
				} else if(type === 4) {
					this.show4 =! this.show4;
				}
			},
			getResumeDetail() {
				this.$api.getResumeInfo().then(res=>{
					console.log(res)
					if(res.code === 200) {
						this.textarea1 = res.data.educationExperience,
						this.textarea2 = res.data.expectation;
						this.textarea3 = res.data.occupationalHistory;
						this.textarea4 = res.data.educationExperience;
					}
				})
			},
			save() {
				let params = {
					educationExperience: this.textarea4,
					expectation: this.textarea2,
					occupationalHistory: this.textarea3,
					skill: this.textarea1
				}
				if(!this.textarea1) {
					uni.showToast({
					    title: '个人技能不能为空',
					    icon: 'none',
					    duration: 2000
					})
					return 
				}
				if(!this.textarea2){
					uni.showToast({
					    title: '求职期望不能为空',
					    icon: 'none',
					    duration: 2000
					})
					return 
				}
				if(!this.textarea3){
					uni.showToast({
					    title: '工作经历不能为空',
					    icon: 'none',
					    duration: 2000
					})
					return 
				}
				if(!this.textarea4){
					uni.showToast({
					    title: '教育经历不能为空',
					    icon: 'none',
					    duration: 2000
					})
					return 
				} 
				this.$api.saveResume(params).then(res=>{
					if(res.code === 200) {
						uni.showToast({
						    title: '保存成功',
						    icon: 'none',
						    duration: 2000
						});
						uni.navigateBack();
					} else {
						uni.showToast({
						    title: res.msg,
						    icon: 'none',
						    duration: 2000
						})
					}
				})
			}
		}
	}
</script>

<style lang="scss">
 page {
    width: 680rpx;
    // 84
    // padding: 0 35rpx 180rpx;
    padding-bottom: 180rpx;
  }

  .content{
	  padding-top: 10rpx;
	  .skill{
		  hegiht:auto;
		  margin-bottom: 20rpx;
		  .title{
			  height: 80rpx;
			  line-height: 80rpx;
			  display: flex;
			  justify-content: space-between;
			  align-items: center;
			  font-size: 34rpx;
			  font-weight: 600;
			  .icon{
				  width: 40rpx;
				  height: 40rpx;
			  }
		  }
		  .value{
			  font-size: 30rpx;
			  line-height: 40rpx;
		  }
		  .uni-textarea{
			  height: 200rpx;
			  border: 1px solid #ccc;
			  overflow: hidden;
			  .con{
				  width:100%;
				  hegiht:100%;
			  }
		  }
	  }
  }
  .footer{
	  display: flex;
	  justify-content: center;
	  align-items: center;
	  margin-top: 60rpx;
	  .connect {
	    width: 492rpx;
	    height: 84rpx;
	    background: $uni-primary;
	    border-radius: 20rpx;
	    color: $uni-text-color-inverse;
	    line-height: 84rpx;
	    text-align: center;
	    overflow: hidden;
	  }
  }
  
</style>
